@layout("/common/_container.html"){
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal" id="payServiceInfoForm">
            <input type="hidden" id="id" value="${payServiceInfo.id}">
            <input type="hidden" id="payServiceName" value="${payServiceInfo.payServiceName}">
            <input type="hidden" id="payServicePriceOne" value="${payServiceInfo.payServicePriceOne}">
            <input type="hidden" id="payServicePriceTwo" value="${payServiceInfo.payServicePriceTwo}">
            <input type="hidden" id="payServiceNum" value="0">

            <input type="hidden" id="customerId" value="${customerId}">
            <input type="hidden" id="operationTime" value="${operationTime}">
            <input type="hidden" id="reservationsId" value="${reservationsId}">
        </div>
        <div class="row">
            <div class="col-sm-12 text-center" style="margin: 20px 0;">
                <h4>收费项目名称： ${payServiceInfo.payServiceName}</h4>
            </div>
        </div>
        <div class="row">
            <ul class="charge_ul">
                <li>
                    <span>单价：</span>
                    <input id="payService" value="${payServiceInfo.payServicePriceTwo}">
                </li>
                <li>
                    <span>数量：</span>
                    <button type="button" class="btn num"
                            style="background:white;color: black;width: 25%;text-align: left;border: 1px solid #cccccc;">
                        0
                    </button>
                    <button type="button" class="btn btn-danger reduce">-</button>
                    <button type="button" class="btn btn-success add">+</button>
                </li>
                <li>
                    <span>总金额：</span>
                    <input disabled="disabled" id="totalAmount" value="0.00">
                </li>
                <li>
                    <span>项目价格：</span>
                    ${payServiceInfo.payServicePriceOne} — ${payServiceInfo.payServicePriceTwo}元
                </li>
                <li>
                    <div style="width: 60%;display: flex;flex-wrap:wrap;" id="inputBox">
                        <input class="tool_ipt"
                               style="border-right: 1px solid black;border-bottom: 1px solid black;text-align: right;padding-right: 4px"
                               value="" id="leftUp">
                        <input class="tool_ipt" style="border-bottom: 1px solid black;padding-left: 4px" value=""
                               id="rightUp">
                        <input class="tool_ipt"
                               style="border-right: 1px solid black;text-align: right;padding-right: 4px" value=""
                               id="leftDown">
                        <input class="tool_ipt" style="padding-left: 4px" value="" id="rightDown">
                    </div>
                </li>
            </ul>
        </div>
        <div>
            <div class="row">
                <ul class="charge_ul">
                    <li>
                        <span>医生：</span>
                        <input id="doctor" style="width: 13%" name="医生"/>
                        <button
                                type="button" class="btn btnChoice" onclick="PayServiceInfoDlg.distributiveDoctor()">请选择
                        </button>
                    </li>
                    <li>
                        <span>护士/医助：</span>
                        <input id="nurse" style="width: 13%" name="医助/护士"/>
                        <button
                                type="button" class="btn btnChoice" onclick="PayServiceInfoDlg.distributiveNurse()">请选择
                        </button>
                    </li>
                    <li>
                        <span>转诊人：</span>
                        <input id="referraler" style="width: 13%" name="转诊人"/>
                        <button
                                type="button" class="btn btnChoice" onclick="PayServiceInfoDlg.distributiveReferrer()">
                            请选择
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2" style="display: none"><!-- 隐藏方案选择框，默认是第一个 -->
                <select class="form-control" id="typeNumber" name="typeNumber">
                    <option value="1">方案一</option>
                    <option value="2">方案二</option>
                    <option value="3">方案三</option>
                </select>
            </div>
        </div>
        <div class="row btn-group-m-t">
            <div class="col-sm-8"></div>
            <div class="col-sm-4">
                <div class="btnBox">
                    <button type="button" id="ensure" class="btn" onclick="addDeal()">提交</button>
                    <button type="button" style="background: #da6792;" id="cancel" class="btn"
                            onclick="PayServiceInfoDlg.close()">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="noneBox" style="display: none">
    <div id="tipsBox">
        <ul class="tipsUl clearfix">
            <li class="tipsLi">恒牙</li>
            <li>乳牙</li>
        </ul>
        <div>
            <div id="permanent" >
                <div class="toothBox">
                    <div class="toothTop" >
                        <div class="toothTopLeft">
                            <span style="background: url('${ctxPath}/static/img/Tooth_18_Facial.png') no-repeat center top;background-size: 90%"><span>8</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_17_Facial.png') no-repeat center top;background-size: 90%"><span>7</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_16_Facial.png') no-repeat center top;background-size: 91%"><span>6</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_15_Facial.png') no-repeat center top;background-size: 61%"><span>5</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_14_Facial.png') no-repeat center top;background-size: 64%"><span>4</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_13_Facial.png') no-repeat center top;background-size: 55%"><span>3</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_12_Facial.png') no-repeat center top;background-size: 55%"><span>2</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_11_Facial.png') no-repeat center top;background-size: 67%"><span>1</span></span>
                        </div>
                        <div class="toothTopRight">
                            <span style="background: url('${ctxPath}/static/img/Tooth_21_Facial.png') no-repeat center top;background-size: 67%"><span>1</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_22_Facial.png') no-repeat center top;background-size: 55%"><span>2</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_23_Facial.png') no-repeat center top;background-size: 55%"><span>3</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_24_Facial.png') no-repeat center top;background-size: 64%"><span>4</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_25_Facial.png') no-repeat center top;background-size: 62%"><span>5</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_26_Facial.png') no-repeat center top;background-size: 91%"><span>6</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_27_Facial.png') no-repeat center top;background-size: 90%"><span>7</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_28_Facial.png') no-repeat center top;background-size: 90%"><span>8</span></span>
                        </div>
                    </div>
                    <div class="toothBottom">
                        <div class="toothBottomLeft">
                            <span style="background: url('${ctxPath}/static/img/Tooth_48_Facial.png') no-repeat center 36px;background-size: 100%"><span>8</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_47_Facial.png') no-repeat center bottom;background-size: 85%"><span>7</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_46_Facial.png') no-repeat center bottom;background-size: 91%"><span>6</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_45_Facial.png') no-repeat center bottom;background-size: 55%"><span>5</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_44_Facial.png') no-repeat center bottom;background-size: 56%"><span>4</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_43_Facial.png') no-repeat center bottom;background-size: 49%"><span>3</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_42_Facial.png') no-repeat center bottom;background-size: 45%"><span>2</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_41_Facial.png') no-repeat center bottom;background-size: 45%"><span>1</span></span>
                        </div>
                        <div class="toothBottomRight">
                            <span style="background: url('${ctxPath}/static/img/Tooth_31_Facial.png') no-repeat center bottom;background-size: 45%"><span>1</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_32_Facial.png') no-repeat center bottom;background-size: 45%"><span>2</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_33_Facial.png') no-repeat center bottom;background-size: 49%"><span>3</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_34_Facial.png') no-repeat center bottom;background-size: 58%"><span>4</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_35_Facial.png') no-repeat center bottom;background-size: 56%"><span>5</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_36_Facial.png') no-repeat center bottom;background-size: 93%"><span>6</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_37_Facial.png') no-repeat center bottom;background-size: 85%"><span>7</span></span>
                            <span style="background: url('${ctxPath}/static/img/Tooth_38_Facial.png') no-repeat center 36px;background-size: 100%"><span>8</span></span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: none" id="deciduous">
                <div class="toothTop" >
                    <div class="toothTopLeft">
                        <span style="background: url('${ctxPath}/static/img/Tooth_55_Facial.png') no-repeat center top;background-size: 84%"><span>E</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_54_Facial.png') no-repeat center top;background-size: 82%"><span>D</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_53_Facial.png') no-repeat center top;background-size: 59%"><span>C</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_52_Facial.png') no-repeat center top;background-size: 58%"><span>B</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_51_Facial.png') no-repeat center top;background-size: 71%"><span>A</span></span>
                    </div>
                    <div class="toothTopRight">
                        <span style="background: url('${ctxPath}/static/img/Tooth_61_Facial.png') no-repeat center top;background-size: 71%"><span>A</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_62_Facial.png') no-repeat center top;background-size: 58%"><span>B</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_63_Facial.png') no-repeat center top;background-size: 59%"><span>C</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_64_Facial.png') no-repeat center top;background-size: 82%"><span>D</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_65_Facial.png') no-repeat center top;background-size: 84%"><span>E</span></span>
                    </div>
                </div>
                <div class="toothBottom">
                    <div class="toothBottomLeft">
                        <span style="background: url('${ctxPath}/static/img/Tooth_85_Facial.png') no-repeat center bottom;background-size: 90%"><span>E</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_84_Facial.png') no-repeat center bottom;background-size: 100%"><span>D</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_83_Facial.png') no-repeat center bottom;background-size: 51%"><span>C</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_82_Facial.png') no-repeat center bottom;background-size: 48%"><span>B</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_82_Facial.png') no-repeat center bottom;background-size: 48%"><span>A</span></span>
                    </div>
                    <div class="toothBottomRight">
                        <span style="background: url('${ctxPath}/static/img/Tooth_71_Facial.png') no-repeat center bottom;background-size: 48%"><span>A</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_72_Facial.png') no-repeat center bottom;background-size: 48%"><span>B</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_73_Facial.png') no-repeat center bottom;background-size: 51%"><span>C</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_74_Facial.png') no-repeat center bottom;background-size: 100%"><span>D</span></span>
                        <span style="background: url('${ctxPath}/static/img/Tooth_75_Facial.png') no-repeat center bottom;background-size: 88%"><span>E</span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctxPath}/static/modular/basicData/payService/payService_info.js"></script>
<script>
    var add = document.getElementsByClassName('add ')[0];    //加
    var reduce = document.getElementsByClassName('reduce ')[0];  //减
    var numtxt = document.getElementsByClassName('num ')[0];  //数
    var num = numtxt.innerText;  //数量
    var price1 = "${payServiceInfo.payServicePriceOne}";
    var price2 = "${payServiceInfo.payServicePriceTwo}";
    var payService = document.getElementById('payService');

    payService.oninput = function () {
        var payService =document.getElementById("payService").value;

        if((parseFloat(payService))>(parseFloat(price2))){
            alert("单价不应大于价格区间最大值！");
            return;
        }
        if((parseFloat(payService))<(parseFloat(price1))){
            alert("单价不应小于价格区间最小值！");
            return;
        }
        var totalAmount = (parseFloat(payService) * num).toFixed(2);
        if(isNaN(totalAmount) == true){
            document.getElementById("totalAmount").value = 0;
        }else {
            document.getElementById("totalAmount").value = totalAmount;
        }
    };
    add.onclick = function () {
        var payService = document.getElementById("payService").value;
        if (payService == null || payService == "") {
            alert("请输入单价！");
            return;
        }
        if (!(/^[0-9]{1}\d{0,6}(\.\d{1,2})?$/.test(payService))) {
            alert("请输入正确金额！");
            return;
        }
        if ((parseFloat(payService)) > (parseFloat(price2))) {
            alert("单价不应大于价格区间最大值！");
            return;
        }
        if ((parseFloat(payService)) < (parseFloat(price1))) {
            alert("单价不应小于价格区间最小值！");
            return;
        }
        num++;
        numtxt.innerHTML = num;
        var totalAmount = (parseFloat(payService) * num).toFixed(2);
        document.getElementById("totalAmount").value = totalAmount;
        document.getElementById("payServiceNum").value = num;
    };
    reduce.onclick = function () {
        var payService = document.getElementById("payService").value;
        if (payService == null || payService == "") {
            alert("请输入单价！");
            return;
        }
        if (!(/^[0-9]{1}\d{0,6}(\.\d{1,2})?$/.test(payService))) {
            alert("请输入正确金额！");
            return;
        }
        if ((parseFloat(payService)) > (parseFloat(price2))) {
            alert("单价不应大于价格区间最大值！");
            return;
        }
        if ((parseFloat(payService)) < (parseFloat(price1))) {
            alert("单价不应小于价格区间最小值！");
            return;
        }
        num--;
        if (num <= 0) {
            num = 0;
        }
        numtxt.innerHTML = num;
        var totalAmount = (parseFloat(payService) * num).toFixed(2);
        document.getElementById("totalAmount").value = totalAmount;
        document.getElementById("payServiceNum").value = num;
    };

    var getCount = 0;

    function addDeal() {
        var payServiceNum = document.getElementById("payServiceNum").value;
        var payServicePriceOne = document.getElementById("payServicePriceOne").value;
        var payServicePriceTwo = document.getElementById("payServicePriceTwo").value;
        var totalAmount = document.getElementById("totalAmount").value;
        var doctor = document.getElementById("doctor").value;
        var nurse = document.getElementById("nurse").value;
        var referraler = document.getElementById("referraler").value;
        console.log(referraler);
        if (payServicePriceOne * payServiceNum > totalAmount) {
            getCount = 0;
            alert("总金额不能小于价格区间应收最小金额");
            return;
        }
        if (payServicePriceTwo * payServiceNum < totalAmount) {
            getCount = 0;
            alert("总金额不能大于价格区间应收最大金额");
            return;
        }
        if (payServiceNum == 0 || payServiceNum < 0) {
            getCount = 0;
            alert("数量必须大于0");
            return;
        }
        if (doctor == null || doctor == "") {
            getCount = 0;
            alert("请选择医生!");
            return;
        }
        getCount++;
        if (getCount == 1) {
            $.ajax({
                url: Feng.ctxPath + "/payService/addDealInfo",
                type: "post",
                data: {
                    "id": document.getElementById("id").value,
                    "totalAmount":document.getElementById("totalAmount").value,
                    "customerId":document.getElementById("customerId").value,
                    "reservationsId":document.getElementById("reservationsId").value,
                    "payService":document.getElementById("payService").value,
                    "payServiceNum":document.getElementById("payServiceNum").value,
                    "leftUp":document.getElementById("leftUp").value,
                    "leftDown":document.getElementById("leftDown").value,
                    "rightUp":document.getElementById("rightUp").value,
                    "rightDown":document.getElementById("rightDown").value,
                    "nurse":document.getElementById("nurse").value,
                    "doctor":document.getElementById("doctor").value,
                    "referraler":document.getElementById("referraler").value,
                    "operationTime":document.getElementById("operationTime").value
                },
                success: function (data) {
                    window.parent.getdealinfolist();
                    Feng.success("添加成功!");
                    PayServiceInfoDlg.close()
                },
                error: function (data) {
                    alert('内部故障!');
                }
            });
        }
    }
</script>
<style>
    .tipsUl{padding: 0;text-align: center;color: #666666}
    .tipsUl>li{float: left;width: 110px;height: 34px;line-height: 34px;border-radius: 3px;border: 1px solid #dddddd}
    .tipsLi{background: #337ab7;color: white}
    .toothTop>div>span>.spanStyle,.toothBottom>div>span>.spanStyle{color:#FFFFFF;background: #337ab7;padding: 3px 11px;}
    .toothBox{display: flex;flex-flow: column;text-align: center}
    .toothTop,.toothBottom,.toothTop>div,.toothBottom>div{flex: 1;display: flex}
    .toothTop>div,.toothBottom>div{background: #808080;margin: 1px;padding: 2px;}
    .toothTop>div>span,.toothBottom>div>span{flex: 1;color: #666666;border:1px solid transparent}
    .toothTop>div>span:hover,.toothBottom>div>span:hover{border: 1px solid #428bca;}
    .toothTop>div>span{padding: 100px 10px 6px;}  .toothBottom>div>span{padding: 6px 10px 100px;}
    .toothTop>div>span>span,.toothBottom>div>span>span{padding: 3px 11px;background: white}
    .btnBox button {
        background: #30add1;
        color: white;
        width: 96px;
    }

    .charge_ul > li {
        line-height: 50px;
    }

    .charge_ul > li > input {
        height: 35px;
        width: 25%;
        border: 1px solid #cccccc;
        border-radius: 3px;
        padding-left: 10px;
    }

    .charge_ul > li > span {
        display: inline-block;
        width: 12%;
    }

    .btnChoice {
        background: #618aa8;
        color: white;
        width: 100px;
    }

    #inputBox > input {
        width: 50%;
        border: none;
        outline: none;
    }
</style>
@}
